<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ include file="/common/include/util.jsp" %>
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>商品列表(统计)</title>
		<%@ include file="/common/include/title.jsp"%>
		
		<script src="${rootPath }/common/resource/highcharts.js"></script>
		<script src="${rootPath }/common/resource/modules/exporting.js"></script>
		<script type="text/javascript">
			<%--
				报表要求的数据是页面一打开加载数据,
				easyui是要求数据发起第二次请求.
				
				到底数据应该怎么办呢?
			--%>
			$(function()
			{
				$('#container').highcharts({
			        chart: {
			            type: 'line'
			        },
			        title: {
			            text: '商品按天统计'
			        },
			        subtitle: {
			            text: '数据来源: www.aebiz.com'
			        },
			        xAxis: {
			            categories: [
			      		/* '一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月' */ 
				      	<c:forEach items="${requestScope.statList }" var="map" varStatus="stat">
				      		<%--
				      			如何使用EL表达式取map的值
				      		 --%>
				      		'${map.createTime}'
				      		/* 最后一个木有 , */
				      		<c:if test="${!stat.last}">
					      		,
				      		</c:if>
						</c:forEach>
			            ]
			        },
			        yAxis: {
			            title: {
			                text: '数量(条数)'
			            }
			        },
			        plotOptions: {
			            line: {
			                dataLabels: {
			                    enabled: true          // 开启数据标签
			                },
			                enableMouseTracking: false // 关闭鼠标跟踪，对应的提示框、点击事件会失效
			            }
			        },
			        series: [{
			            name: '东京',
			            data: [
			           /*
			           	7.0, 6.9, 9.5, 14.5, 18.4, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6
			           */  
			           <c:forEach items="${requestScope.statList }" var="map" varStatus="stat">
				      		<%--
				      			如何使用EL表达式取map的值
				      		 --%>
				      		${map.count}
				      		/* 最后一个木有 , */
				      		<c:if test="${!stat.last}">
					      		,
				      		</c:if>
						</c:forEach>
			           ]
			        }]
			    });
			});
		
			/* 搜索
				~先将条件放到请求头中
				~刷新表格数据
			*/
			function query(operType)
			{
				/* 先将条件放到请求头中 */
				var st = $("#st").datetimebox("getValue");
				var ed = $("#ed").datetimebox("getValue");
				
				alert(st + "-->" + ed)
				/* 将数据放到请求头传递给后台有两种方法:get,post */
				/* 先取得datagrid的对象 */
				var ops = $("#dataGrid").datagrid("options");
				/* 只能以get方法放到url上面(参数) */
				ops.url = "${rootPath }/stat/goodsListJSON.htm?st=" +st + "&ed=" + ed + "&operType=" + operType;
				/* 重新刷新表格 */
				$("#dataGrid").datagrid("reload");
				return false ; 
			}
		</script>
	</head>
	<body>
		<a href="" onclick="return $('#container').toggle();" class="easyui-linkbutton">显示报表</a>
		<div id="container" style="min-width:400px;height:400px;"></div>
		
		<!-- 测试数据 -->
		<table id="dataGrid" class="easyui-datagrid" title="测试数据"
			data-options="
				url:'${rootPath }/stat/goodsListJSON.htm',
				method:'post',
				border:false,
				singleSelect:true,
				fit:true,
				fitColumn:true,
				collapsible:true,
				rownumbers:true,
				toolbar:'#gridToolsbar'">
			<thead>
				<tr>
					<th data-options="field:'ck',checkbox:true"></th>
					<th data-options="field:'createTime'">创建时间</th>
					<th data-options="field:'count'" width="100">数量</th>
				</tr>
			</thead>
		</table>
		<!-- 表格的工具栏 -->
		<div id="gridToolsbar">
			<div>
				<input name="st" id="st" value="" class="easyui-datetimebox" placeholder="请输入时间" data-options="">
				-->
				<input name="ed" id="ed" value="" class="easyui-datetimebox" placeholder="请输入时间" data-options="">
				<a href="" onclick="return query('')" class="easyui-linkbutton"
					data-options="iconCls:'icon-search'" plain="true">搜索</a>
				<a href="${rootPath }/stat/statsList.htm?operType=downFile" target="_blank"
				 class="easyui-linkbutton"
				 data-options="iconCls:'icon-search'" plain="true">导出</a>
			</div>
			<div>
				<a href="#" class="easyui-linkbutton" title="添加"
					data-options="iconCls:'icon-add'" plain="true"
					onclick="return addData()">添加</a> <a href="#"
					class="easyui-linkbutton" title="更新"
					data-options="iconCls:'icon-edit'" plain="true"
					onclick="return addData()">更新</a> <a href="#"
					class="easyui-linkbutton" title="删除"
					data-options="iconCls:'icon-remove'" plain="true"
					onclick="return removeData()">删除</a>
			</div>
		</div>
	</body>
</html>